<template>
    <div>
        <ul class="list">
          <li v-for="item in letters"
              :key="item"
              :ref="item"
              @click="cityClick"
              @touchstart="handleTouchStart"
              @touchmove ="handleTouchMove"
              @touchend = "handleTouchEnd"
          >
            {{item}}
          </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        props:{
          aside:Object
        },
        data(){
          return{
            touchStauts:false,//定义开关
            startY:0,
            timer:null
          }
        },
        updated(){//声明周期钩子函数 当页面渲染完成后执行
            this.startY = this.$refs['A'][0].offsetTop;//获得"A"离最外层div上边距离
        },
        methods:{
          cityClick: function(e){//向外触发事件
              // console.log(e.target.innerText)
              this.$emit('change',e.target.innerText)
          },
          handleTouchStart:function(){
            this.touchStauts=true
            // console.log("按下")
          },
          handleTouchMove:function(e){
            if(this.touchStauts){
              if(this.timer){
                clearTimeout(this.timer)
              }
              this.timer = setTimeout(()=>{
              const touchY = e.touches[0].clientY - 76;//获得当前触发点离最外层div上边的距离
              const index = Math.floor((touchY - this.startY) / 20);//计算当前触发点的下标
              if(index>=0&&index<this.letters.length){
                this.$emit("change",this.letters[index])
              }
              },20)
            }

              // console.log(index)
              // console.log("移动")
          },
          handleTouchEnd:function(){
            this.touchStauts=false
              // console.log("抬起")
          }

        },
        computed:{//讲aside转为数组
            letters(){
              const letters = [];
              for (let i in this.aside){
                letters.push(i)
              }
              return letters
            }
        }
    }
</script>

<style scoped lang="stylus">
    .list{
      width :.2rem;
      position :absolute;
      top:.8rem;
      right :0;
      bottom :0;
      display :flex;
      flex-direction :column;
      justify-content :center;
      li{
        text-align :center;
        line-height :.2rem;
        color :#00bcd4;
        font-size :.16rem;
      }
    }
</style>
